
<!-- 品牌 -->
<template>
  <div class="page">
    <div class="content">
      <div class="toolbar">
        <div class="buttons">
          <div class="buttons-item">{{"品牌(222)"}}</div>
          <div class="buttons-item">{{"行业(212)"}}</div>
          <el-button class="buttons-item add-btn" type="text" @click="handleAddBrand">添加品牌</el-button>
          <el-button class="buttons-item add-btn" type="text" @click="handleAddBrandKind">添加品类</el-button>
        </div>
        <el-input class="search" size="mini" suffix-icon="el-icon-search" placeholder="输入关键字搜索"/>
      </div>
      <el-table class="list" height="250" :data="tableData" border stripe>
        <el-table-column prop="ppmc" label="品牌名"></el-table-column>
        <el-table-column prop="name" label="LOGO">
          <template slot-scope="scope">
            <el-image class="cell-logo-img" :src="scope.row.pplogo" fit="fill"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="plmc" label="品类"></el-table-column>
        <el-table-column prop="cpsl" label="产品"></el-table-column>
        <el-table-column label="传播渠道">
          <template slot-scope="scope">
            <span>{{`抖音(${scope.row.cbqd.dy})`}}</span>
            &nbsp;
            &nbsp;
            <span>{{`小红书(${scope.row.cbqd.xhs})`}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ynsjhz" label="近一年数据汇总"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              class="edit-btn"
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <addBrand :show="showAddBrand" @closed="handleClosed"/>
    <addBrandKind :show="showAddBrandKind" @closed="handleClosed"/>
  </div>
</template>

<script>
  import addBrand from "@/components/AddBrand";
  import addBrandKind from "@/components/AddBrandKind";
export default {
  components:{
    addBrand,
    addBrandKind
  },
  mounted() {},
  data() {
    return {
      showAddBrand:false,
      showAddBrandKind:false,
      tableData: [
        {
          ppmc: "康师傅",
          pplogo:
            "https://hbimg.huabanimg.com/3f60f47256c837d9ca83424d5c94ae17a2d53e27541e-FxPnoc_fw658",
          plmc: "食品安全",
          cpsl: 91,
          cbqd: { dy: 290, xhs: 199 },
          ynsjhz: 1829
        }
      ]
    };
  },
  methods: {
    handleClosed(){
      this.showAddBrand = false;
      this.showAddBrandKind = false;
    },
    handleAddBrand(){
      this.showAddBrand = true;
    },
    handleAddBrandKind(){
      this.showAddBrandKind = true;
    },
  }
};
</script>

<style scoped>
.page {
  background-color: #f5f5f5;
}

.content {
  margin: 20px;
  display: flex;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.toolbar {
  height: 55px;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: row;
  align-items: center;
}

.buttons {
  margin-left: 100px;
  margin-right: 100px;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.buttons-item {
  width: 170px;
  font-weight: bold;
}

.add-btn {
  color: #333333;
  font-weight: normal;
}

.search {
  width: 230px;
  margin-right: 90px;
  text-align: center;
}

.edit-btn {
  color: #333333;
  font-weight: normal;
}

.list {
  flex: 1;
  overflow-y: auto;
}

.cell-logo-img {
  height: 80px;
  widows: 140px;
  background-color: #f1f1f1;
}
</style>